import React from 'react';
import { SwipeCell, Button, Card, Tag, Image } from 'react-vant';
import './index.css';
import MyPromotePrice from '../MyPromotePrice';
import { getGoodsImagePath } from '@/utils/common';
import { useNavigate } from 'react-router-dom';

interface GoodCardProps {
  good: ResponseGoodList;
  onDelete?: (id: number) => void;
}

const GoodCard: React.FC<GoodCardProps> = ({ good, onDelete }) => {
  const navigate = useNavigate();

  const handleDelete = () => {
    onDelete?.(good.id);
  };

  return (
    <SwipeCell
      rightAction={
        <Button square type="danger" className="delete-btn" onClick={handleDelete}>
          删除
        </Button>
      }
    >
      <Card round className="good-card" onClick={() => navigate('/good/' + good.id)}>
        <div className="good-content">
          <Image src={getGoodsImagePath(good.id, good.photo)} className="good-image" />
          <div className="good-info">
            <div className="good-name">{good.name}</div>
            <div className="good-spec">{good.spec}</div>
            <div className="good-price">
              <MyPromotePrice price={good.price} propmotePrice={good.promotePrice} />
            </div>
            <div className="good-sales">已售 {good.saleCout}</div>
          </div>
        </div>
      </Card>
    </SwipeCell>
  );
};

// Mock data function
export const mockProduct = (): ResponseGoodList => ({
  id: 1,
  name: '高端智能手机',
  photo: 'https://img.yzcdn.cn/vant/ipad.jpeg',
  price: 5999,
  promotePrice: 4999,
  saleCout: 1200,
  spec: '8GB+256GB',
  specs: '',
});

export default GoodCard;
